<template>
  <div class="setting_wrapper">
    <van-nav-bar title="设置" class="nav_bar" fixed @click-left="onClickLeft" />
    <div class="container">
      <div class="avatar">
        <van-image class="icon" round :src="userData.avatar" />
        <!-- <span class="avatar_tips">修改头像</span> -->
      </div>
      <div class="form">
        <van-cell-group>
          <van-cell>
            <template #title>
              <span class="cell_title">昵称：{{ name }}</span>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
              <span class="cell_title">手机号：{{ phone }}</span>
            </template>
          </van-cell>
          <van-cell is-link @click="goAddress">
            <template #title>
              <span class="cell_title">我的收货地址</span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
    <van-action-sheet
      v-model="showUsername"
      title="修改昵称"
      :closeable="false"
      get-container=".setting_wrapper"
    >
      <div class="username_box">
        <van-field v-model="username" placeholder="新昵称" />
        <div class="btn">提交</div>
      </div>
    </van-action-sheet>
    <van-action-sheet
      v-model="showPhone"
      title="修改手机号码"
      :closeable="false"
      get-container=".setting_wrapper"
    >
      <div class="username_box">
        <van-field v-model="username" placeholder="新手机号" />
        <div class="btn">提交</div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  components: {},
  props: {},
  data() {
    return {
      showUsername: false,
      username: "",
      showPhone: false,
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["userData"]),
    name() {
      return this.userData.userName
        ? this.userData.userName[0] +
            "*".repeat(Math.max(this.userData.userName.length - 1, 0))
        : "";
    },
    phone() {
      return this.userData.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1*​**​*$2");
    },
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    goAddress() {
      this.$router.push({
        path: "/address",
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.setting_wrapper {
  height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png")
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  box-sizing: border-box;
  padding: 200px 50px 150px 50px;

  .container {
    padding: 50px 30px;
    background: #fff;
    border-radius: 20px;
  }

  .avatar {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;

    .icon {
      width: 225px;
      height: 225px;
    }

    .avatar_tips {
      font-size: 38px;
      color: #919191;
      margin-top: 20px;
    }
  }

  .form {
    margin-top: 60px;

    .cell_title {
      font-size: 42px;
      color: #333333;
    }
  }

  .nav_bar {
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }
  }

  .username_box {
    min-height: 100vh;
    background: #fff;
    padding: 100px 50px;
    text-align: center;

    /deep/ .van-cell {
      background: #eee;
    }

    .btn {
      display: inline-block;
      margin-top: 100px;
      padding: 25px 240px;
      background: #058efb;
      color: #fff;
      font-size: 44px;
      text-align: center;
      border-radius: 999px;
      font-weight: bold;
    }
  }
}
</style>
